<template>
  <div class="info combground">
    <div class="container">
      <div class="breadcrumb">
        <img src="~/assets/images/breadcrumb.png" alt="" />
        当前位置：{{ info.current }}
      </div>
      <div class="content">
        <div class="page-content">
          <div class="page-head">
            <div class="title">{{ currentInfo.title }}</div>
            <div class="date-and-read">
              <div class="date">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ currentInfo.create_time || '无' }}
              </div>
              <div class="read">
                <img src="~/assets/images/read.png" alt="" />
                {{ currentInfo.visit || '0' }}人已读
              </div>
            </div>
          </div>
          <div class="image"><img :src="currentInfo.image_input" width="100%" height="300px" style="object-fit: cover" alt="" /></div>
          <div class="page-body" v-html="(currentInfo.content && currentInfo.content.content) || '暂无详细内容'"></div>
          <div class="page-footer">
            <div v-if="info.prev" class="prev item transition" @click="changeArticle(info.prev.article_id)">上一篇：{{ info.prev ? info.prev.title : '暂无' }}</div>
            <div v-if="info.next" class="next item transition" @click="changeArticle(info.next.article_id)">下一篇：{{ info.next.title }}</div>
          </div>
        </div>
        <div class="page-others" v-if="info.prev">
          <div class="page-prev cursor" @click="changeArticle(info.prev.article_id)">
            <div class="btn">上一篇</div>
            <div class="body">
              <img :src="info.prev.image_input" alt="info.prev.title" />
              <div class="title transition">{{ info.prev.title }}</div>
              <div class="time">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ info.prev.create_time }}
              </div>
            </div>
          </div>
          <div class="page-next cursor" v-if="info.next" @click="changeArticle(info.next.article_id)">
            <div class="btn">下一篇</div>
            <div class="body">
              <img :src="info.next.image_input" alt="info.next.title" />
              <div class="title transition">{{ info.next.title }}</div>
              <div class="time">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ info.next.create_time }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsDetail } from '@/request/api';

export default {
  name: 'detail',
  data() {
    return {
      info: {
        data: {},
        prev: {},
        next: {}
      },
      currentInfo: {}
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    changeArticle(id) {
      if (id) {
        this.$router.push({
          path: '/advisory/details/' + id,
          query: {
            t: Date.now()
          }
        });
      }
    },
    /**
     * 获取新闻资讯详情
     */
    getInfo() {
      const id = this.$route.params.id;
      getNewsDetail(id)
        .then(async res => {
          this.info = res.data;
          console.log(this.info);
          this.currentInfo = res.data.data;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/style/common.scss';

.info {
  color: #666;
  padding-top: 50px;
  padding-bottom: 80px;

  .breadcrumb {
    padding-bottom: 50px;
    display: flex;
    align-items: center;

    img {
      margin-right: 5px;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;

    .page-content {
      width: 73%;
      background-color: #fff;
      padding: 30px;

      .page-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: solid 1px rgb(238, 238, 238);

        .title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 30px;
        }

        .date-and-read {
          color: #969696;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 30px;

          .date,
          .read {
            display: flex;
            align-items: center;
            margin-right: 15px;

            img {
              width: 20px;
              margin-right: 5px;
            }
          }
        }
      }

      .page-body {
        padding: 15px 30px;
      }

      .page-footer {
        padding: 15px 30px;
        border-top: solid 1px rgb(238, 238, 238);

        .item {
          display: block;
          margin-bottom: 15px;
          cursor: pointer;

          &:hover {
            color: $theme-color-1;
          }
        }
      }
    }

    .page-others {
      width: 300px;

      .page-prev,
      .page-next {
        height: 370px;
        background-color: #fff;
        font-size: 14px;

        .btn {
          height: 48px;
          line-height: 48px;
          color: #fff;
          text-align: center;
        }

        .body {
          padding: 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          cursor: pointer;

          > img {
            width: 245px;
            height: 172px;
            margin-bottom: 15px;
          }

          .title {
            height: 42px;
            @include text-omitted(2);
            font-size: 16px;
            margin-bottom: 20px;
          }

          .time {
            display: flex;

            img {
              width: 20px;
              margin-right: 5px;
            }
          }
          &:hover {
            .title {
              color: $theme-color-1;
            }
          }
        }
      }

      .page-prev {
        margin-bottom: 30px;

        .btn {
          background-color: $theme-color-1;
        }
      }

      .page-next {
        .btn {
          background-color: rgb(0, 133, 232);
        }
      }
    }
  }
}
</style>
